<template>
  <div>
    <modal :visible="visible" @closeModal="close">
      <div v-if="this.$store.state.user.hasLogin && birthDay && !changeShow">
        <view class="modal-tip">选择您的操作</view>
        <view class="btn" @click="openDatePicker">修改生辰</view>
        <view class="btn" style="backgroundcolor: #999999" @click="logout"
          >退出登录</view
        >
      </div>

      <div v-if="!birthDay || changeShow">
        <view class="example-body">
          <div v-if="!birthDay">最后一步，输入生辰，获取您的专属运势</div>
          <uni-easyinput
            v-if="birthDay"
            :disabled="true"
            class="input-box"
            :placeholder="placeholder"
            :placeholderStyle="placeholderStyle"
          ></uni-easyinput>

          <view
            class="input-box_view"
            @click="openDatetimePicker"
            :style="{ color: birDay ? '#262626' : '#999' }"
          >
            {{ birDay ? birDay : "请选择您的生辰" }}</view
          >

          <view class="btn" @click="uploadBir">确定</view>
        </view>
      </div>
    </modal>
    <SimpleDateTimePicker
      ref="myPicker"
      @submit="handleSubmit"
      :start-year="1900"
      :end-year="2030"
    />
  </div>
</template>
  
  <script>
import { uploadUserApi } from "@/http/api";
import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";

export default {
  components: { SimpleDateTimePicker },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      birthDay: uni.getStorageSync("userInfo").birthDay,
      placeholder: "",
      changeShow: false,
      style: "",
      placeholderStyle: "color:#262626;font-size:24rpx;",
      birDay: "",
      selectedTime: "",
    };
  },
  methods: {
    close() {
      this.$emit("closeModal");
      //刷新页面
      window.location.reload();
    },
    openDatePicker() {
      //打开父组件的生辰弹窗
      this.changeShow = true;
    },
    logout() {
      //清除缓存
      // this.close();
      this.$store.dispatch("user/Logout");
      //刷新页面
      setTimeout(() => {
        window.location.reload();
      }, 200);

      // 处理点击 "退出登录" 按钮的逻辑
      // ...
    },
    uploadBir() {
    
      if (!this.birDay) {
        //如果没有生辰，不允许提交
        uni.showToast({
          title: "请填写生辰",
          icon: "none",
        });
        return;
      }

      let param = {
        birthDay: this.birDay,
      };
      //修改,填写生日
      uni.showLoading();
      uploadUserApi(param).then((res) => {
        const { code, data, msg } = res;
        if (code === 200) {
          res.user = res.data;
          this.$store.commit("user/SET_USERINFO", res);

          this.close();
        }
      });
    },
    // 打开picker
    openDatetimePicker() {
      console.log("openDatetimePicker");
      this.$refs.myPicker.show();
    },

    // 关闭picker
    closeDatetimePicker() {
      this.$refs.myPicker.hide();
    },

    handleSubmit(e) {
      this.birDay = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
      
    },
  },
  created() {
    //取localStorage的生辰
    let userInfo = uni.getStorageSync("userInfo");

    this.placeholder = `当前生辰是${userInfo.birthDay}`;
  },
};
</script>
  
  <style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  width: 300px;
  padding: 16px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.modal button {
  margin-right: 8px;
}

.close-button {
  position: absolute;
  top: 60px;
  right: 8px;
}

.modal-tip {
  font-size: 28rpx;
  color: #262626;
  padding-bottom: 48rpx;
}

.btn {
  width: 604rpx;
  height: 71rpx;
  background: #ca4336;
  border-radius: 12rpx;
  margin-bottom: 36rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #fff;
}
.input-box {
  margin: 20rpx 0 48rpx 0;
}
.input-box_view {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  width: 624rpx;
  height: 68rpx;
  margin: 10px 0 24px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 24rpx;
  font-size: 24rpx;
}
</style>
  